<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <h2>系统登录</h2>
            </div>

            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form"
                @submit.prevent="handleLogin()">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.phone" placeholder="请输入用户名" :prefix-icon="User" clearable />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
                        show-password clearable />
                </el-form-item>

                <el-form-item prop="remember">
                    <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" native-type="submit" :loading="loading" class="login-btn">
                        <template #icon>
                            <el-icon>
                                <Right />
                            </el-icon>
                        </template>
                        登录
                    </el-button>
                </el-form-item>
            </el-form>

            <div class="login-footer">
                <span class="footer-text">没有账号？<a href="#">立即注册</a></span>
                <span class="footer-text"><a href="#">忘记密码？</a></span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Right } from '@element-plus/icons-vue'
import login from '../api/login/login.js'
import tool from '@/util/root'
const router = useRouter()

// 表单数据
const loginForm = reactive({
    phone: '15673778011',
    password: '123456',
    remember: false
})

// 表单验证规则
const loginRules = reactive({
    phone: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ]
})

const loading = ref(false)
const loginFormRef = ref()

// 登录方法
const handleLogin = async () => {
    loginFormRef.value.validate((valid) => {
        console.log(valid);
        if (valid) {
                loginSend(loginForm);
        }
    })
}
const loginSend= (loginForm)=>{
    // console.log("登录",loginForm);
    return login.login(loginForm).then(item=>{
        console.log("item.data.tokenName",item.data.tokenName);
        tool.data.set("tokenInfo",item.data)
        localStorage.setItem(item.data.tokenName,item.data.tokenValue)
        ElMessage.success('登录成功')
        router.push('/')
        return item.data;
    })
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f7fa;
    /* background-size: 100%; */
    background-image: url('@/assets/login-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-box {
    width: 400px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    color: #333;
    font-size: 24px;
    font-weight: 500;
}

.login-form {
    margin-top: 20px;
}

.login-btn {
    width: 100%;
    margin-top: 10px;
}

.login-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.footer-text a {
    color: #409eff;
    text-decoration: none;
}

.footer-text a:hover {
    text-decoration: underline;
}
</style>